<!--
 * @Author: your name
 * @Date: 2020-05-19 17:59:08
 * @LastEditTime: 2021-09-10 16:14:56
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /gatt/src/modules/front/pages/GattTable/index.vue
 -->
<template>
  <div class="gatt-view">
    <gatt-view
      ref="gattView0"
      v-show="!nodataShow0"
      :uuId="new Date().getTime()"
      @handleCommand="handleCommand"
    ></gatt-view>
  </div>
</template>

<script>
/* eslint-disable camelcase */
import GattView from '@front/components/GattView'
import * as request from '@front/data/apis/Home'
export default {
  name: 'GattTablePage',
  components: {
    GattView
  },
  data () {
    return {
      loading: false,
      nodataShow0: true,
      nodataShow1: true,
      data0: {
        // split-pane 分割偏移百分比值
        offset: 0.2,
        // 显示的刻度(时间刻度 1:日,2周,3月,4季,5年,默认是1)
        timeMode: 1,
        // 显示星期，默认false
        dayWeek: true,
        // 最小的开始时间
        // startTime: new Date('2020/01/28').getTime(),
        startTime: new Date(2020, 0, 28).getTime(),
        // 最大的结束时间
        // endTime: new Date('2022/01/03').getTime(),
        endTime: new Date(2022, 0, 3).getTime(),
        // 表格头部的属性值(必须要设置),params设置的字段在表头设置的字段里存在才会在浮窗显示
        headData: {},
        // headData里的属性必须要和ganteData里params里的属性相对应,属性名要一样
        gattData: []
      },
      data1: {
        // split-pane 分割偏移百分比值
        offset: 0.2,
        // 显示的刻度(时间刻度 1:日,2周,3月,4季,5年,默认是1)
        timeMode: 1,
        // 最小的开始时间
        // startTime: new Date('2020/01/28').getTime(),
        startTime: new Date(2020, 0, 28).getTime(),
        // 最大的结束时间
        // endTime: new Date('2022/01/03').getTime(),
        endTime: new Date(2022, 0, 3).getTime(),
        // 表格头部的属性值(必须要设置),params设置的字段在表头设置的字段里存在才会在浮窗显示
        headData: {},
        // headData里的属性必须要和ganteData里params里的属性相对应,属性名要一样
        gattData: []
      },
      data: [],
      dataMock: {
        // split-pane 分割偏移百分比值
        offset: 0.2,
        // 显示的刻度(时间刻度 1:日,2周,3月,4季,5年,默认是1)
        timeMode: 1,
        // 最小的开始时间
        // startTime: new Date('2020/01/28').getTime(),
        startTime: new Date(2020, 0, 28).getTime(),
        // 最大的结束时间
        // endTime: new Date('2022/01/03').getTime(),
        endTime: new Date(2022, 0, 3).getTime(),
        // 表格头部的属性值(必须要设置),params设置的字段在表头设置的字段里存在才会在浮窗显示
        headData: {
          title: {
            value: '名称',
            width: 180,
            shrink: true,
            // 是否在鼠标移入浮窗提示框显示该字段
            showToast: false,
            listenClick: true,
            // 控制在表格列表中是否隐藏
            hideHead: false
          },
          startTime: {
            value: '开始时间',
            width: 100,
            showToast: true,
            chooseTime: true,
            timeMode: 1
          },
          endTime: {
            value: '结束时间',
            width: 100,
            showToast: true,
            chooseTime: true,
            timeMode: 2
          },
          area: {
            value: '面积',
            width: 100,
            showToast: true,
            edit: true
          },
          per: {
            value: '出租率',
            width: 100,
            showToast: true,
            hideHead: true
          }
        },
        // headData里的属性必须要和ganteData里params里的属性相对应,属性名要一样
        gattData: [
          {
            id: 1,
            params: {
              title: '平台1',
              // 表格中显示
              startTime: '2020-01-28',
              endTime: '2020-09-01',
              area: '35395m²',
              // 进度比率
              per: '34%',
              // 控制是否对时间分段看每个时间段的详情
              showChild: true,
              children: [
                {
                  title: '平台1-1',
                  startTime: '2020-01-28',
                  endTime: '2020-07-02',
                  area: '395m²',
                  // 控制细分时间段内在有进度比率情况下是否以进度条形式展现
                  showProcess: false,
                  // 进度比率
                  per: '74%',
                  bgcColor: '#00C49A',
                  perBgColor: '#13587E'
                },
                {
                  title: '平台1-2',
                  startTime: '2020-07-03',
                  endTime: '2020-08-02',
                  area: '395m²',
                  // 出租率
                  per: '74%',
                  bgcColor: '#13587E'
                }
              ]
            },
            // 甘特图整个日历时间范围
            startTime: new Date(2020, 0, 28).getTime(),
            endTime: new Date(2020, 8, 1).getTime(),
            level: 1,
            open: false,
            children: [
              {
                id: 2,
                open: true,
                params: {
                  title: '园区1',
                  startTime: '2020-07-19',
                  endTime: '2020-08-12',
                  area: '1685m²',
                  // 出租率
                  per: '46%'
                },
                startTime: new Date(2020, 6, 19).getTime(),
                endTime: new Date(2020, 7, 12).getTime(),
                bgcColor: '#00C49A',
                perBgColor: '#13587E',
                level: 2
              },
              {
                id: 3,
                open: true,
                params: {
                  title: '园区2',
                  startTime: '2020-01-31',
                  endTime: '2020-08-12',
                  area: '1685m²',
                  // 出租率
                  per: '46%',
                  // 控制是否对时间分段看每个时间段的详情
                  showChild: true,
                  children: [
                    {
                      title: '园区2',
                      startTime: '2020-02-19',
                      endTime: '2020-03-25',
                      area: '39m²',
                      // 控制细分时间段内在有进度比率情况下是否以进度条形式展现
                      showProcess: false,
                      // 进度比率
                      per: '50%',
                      bgcColor: 'red',
                      perBgColor: '#13587E'
                    },
                    {
                      title: '园区2',
                      startTime: '2020-07-19',
                      endTime: '2020-07-25',
                      area: '39m²',
                      // 控制细分时间段内在有进度比率情况下是否以进度条形式展现
                      showProcess: false,
                      // 进度比率
                      per: '0%',
                      bgcColor: 'red',
                      perBgColor: '#13587E'
                    },
                    {
                      title: '园区2',
                      startTime: '2020-07-25',
                      endTime: '2020-08-12',
                      area: '95m²',
                      // 出租率
                      per: '0%',
                      bgcColor: '#13587E'
                    }
                  ]
                },
                startTime: new Date(2020, 0, 31).getTime(),
                endTime: new Date(2020, 7, 12).getTime(),
                bgcColor: '#00C49A',
                perBgColor: '#13587E',
                level: 2
              }
            ]
          },
          {
            id: 3,
            params: {
              title: '平台2',
              startTime: '2020-06-19',
              endTime: '2022-01-03',
              area: '75743m²',
              // 出租率
              per: '55%'
            },
            startTime: new Date(2020, 5, 19).getTime(),
            endTime: new Date(2022, 0, 3).getTime(),
            level: 1,
            open: false,
            bgcColor: '#00C49A',
            perBgColor: '#13587E',
            children: [
              {
                id: 4,
                params: {
                  title: '园区',
                  startTime: '2020-06-19',
                  endTime: '2021-12-10',
                  area: '4648m²',
                  // 出租率
                  per: '60%'
                },
                startTime: new Date(2020, 5, 19).getTime(),
                endTime: new Date(2021, 11, 10).getTime(),
                level: 2,
                open: false,
                bgcColor: '#00C49A',
                perBgColor: '#13587E',
                children: [
                  {
                    id: 5,
                    params: {
                      title: '单元',
                      startTime: '2020-06-19',
                      endTime: '2020-12-10',
                      area: '565m²',
                      // 出租率
                      per: '68%'
                    },
                    startTime: new Date(2020, 5, 19).getTime(),
                    endTime: new Date(2020, 11, 10).getTime(),
                    bgcColor: '#00C49A',
                    perBgColor: '#13587E',
                    level: 3,
                    open: true
                  }
                ]
              }
            ]
          }
        ]
      }
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.getGattListFn()
      // this.$refs.gattView.init({
      //   timeMode: this.data.timeMode,
      //   offset: this.data.offset,
      //   startTime: this.data.startTime,
      //   endTime: this.data.endTime,
      //   headData: this.data.headData,
      //   gattData: this.data.gattData
      // })
    },
    getGattListFn () {
      this.loading = true
      request
        .getGattList({ id: '5266261' })
        .then(res => {
          const d = res.data
          if (d.length) {
            this.data = d
            this.setDataInit(d)
          } else {
            this.nodataShow0 = true
            this.nodataShow1 = true
          }
        })
        .catch(res => {
          this.$notify.error({
            title: '错误',
            message: (res.data && res.data.mesg) || res.mesg
          })
        })
        .finally(() => {
          this.loading = false
        })
    },
    setDataInit (d) {
      d.forEach((item, index) => {
        this['nodataShow' + index] = false
        this['data' + index].timeMode = item.timeMode
        this['data' + index].offset = item.offset
        this['data' + index].startTime = item.startTime
        this['data' + index].endTime = item.endTime
        this['data' + index].headData = item.headData
        this['data' + index].gattData = item.ganttData
        this['data' + index].gattData.length &&
          this.$refs['gattView' + index] &&
          this.$refs['gattView' + index].init({
            timeMode: this['data' + index].timeMode,
            offset: this['data' + index].offset,
            startTime: this['data' + index].startTime,
            endTime: this['data' + index].endTime,
            headData: this['data' + index].headData,
            gattData: this['data' + index].gattData
          })
      })
    },
    handleClick (d) {
      // console.log(d)
      // debugger
    },
    change (d) {
      // console.log(d)
      // debugger
    },
    handleCommand (command) {
      if (this.data.length) {
        this.data.forEach(item => {
          item.timeMode = ~~command
        })
        this.setDataInit(this.data)
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.gatt-wrap {
  width: 100%;
  height: 400px;
  border: 1px solid #ccc;
  overflow: hidden;
  box-sizing: border-box;

  .gatt-left, .gatt-right {
    overflow: auto;
    height: 100%;
    box-sizing: border-box;
  }

  .tool-tip {
    position: fixed;
    right: 0;
    top: 60px;
    z-index: 99;
    font-weight: 400;
    text-align: center;
    user-select: none;

    .today {
      display: inline-block;
      height: 30px;
      user-select: none;
      line-height: 30px;
      padding: 0 15px;
      background-color: #fff;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      color: #303030;
      border-radius: 3px;
      box-shadow: 0 3px 12px 0 rgba(48, 48, 48, 0.05), 0 3px 6px 0 rgba(48, 48, 48, 0.1);
      margin-right: 20px;

      height, &:hover {
        color: #409eff;
      }
    }

    .tool-tip-drop {
      .el-dropdown-link {
        height: 30px;
        display: inline-block;
        user-select: none;
        line-height: 30px;
        padding: 0 15px;
        background-color: #fff;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        color: #303030;
        border-radius: 3px;
        box-shadow: 0 3px 12px 0 rgba(48, 48, 48, 0.05), 0 3px 6px 0 rgba(48, 48, 48, 0.1);
        margin-right: 20px;

        &:hover {
          color: #409eff;
        }
      }
    }
  }
}
</style>
